<template>
  <div class="content">
    <div class="scroll-view-box" v-loading="submitBtn">
      <div class="user-title-box">物流信息</div>
      <el-form label-width="120px" :inline="true" :model="addForm" :rules="addFormRules" ref="addFormRules"
        label-position="top">
        <el-form-item label="收货人" prop="consignee">
          <el-input v-model="addForm.consignee" placeholder="输入收货人" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contact">
          <el-input maxlength="11" v-input-limit="0" v-model="addForm.contact" placeholder="输入联系电话" clearable
            class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="addForm.address" placeholder="输入收货地址" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="物流单号" prop="odd_numbers">
          <el-input v-model="addForm.odd_numbers" placeholder="输入物流单号" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="发货日期" prop="delivery_time">
          <el-date-picker value-format="yyyy-MM-dd" v-model="addForm.delivery_time" type="date" placeholder="发货日期"
            class="input-width">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际到货日期" prop="actual_arrival_time">
          <el-date-picker value-format="yyyy-MM-dd" v-model="addForm.actual_arrival_time" type="date"
            placeholder="实际到货日期" class="input-width">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit('addFormRules')" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import purchaseApi from "@/api/purchaseApi";
export default {
  name: 'addLogistics',//
  data() {
    var phoneRule = (rule, value, callback) => {
      if (!/^1\d{10}$/.test(value)) {
        return callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    return {
      addForm: {
        purchase_id: "",
        consignee: "",
        contact: "",
        address: "",
        odd_numbers: "",
        delivery_time: "",
        actual_arrival_time: "",
      },
      addFormRules: {
        consignee: [
          {
            required: true,
            message: "请输入收货人",
            trigger: "change",
          },
        ],
        contact: [
          {
            required: true,
            validator: phoneRule,
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入收货地址",
            trigger: "change",
          },
        ],
        // odd_numbers: [
        //   {
        //     required: true,
        //     message: "请输入物流单号",
        //     trigger: "change",
        //   },
        // ],
        // delivery_time: [
        //   {
        //     required: true,
        //     message: "请选择发货时间",
        //     trigger: "change",
        //   },
        // ],
        // actual_arrival_time: [
        //   {
        //     required: true,
        //     message: "请选择实际到达时间",
        //     trigger: "change",
        //   },
        // ],
      },
      submitBtn: false,
    };
  },
  computed: {
    hisList() {
      return this.$store.getters.routerHis;
    },
    path() {
      return this.$route.path;
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.addForm.purchase_id = this.$route.query.id;
    } else {
      this.$message({
        type: 'warning',
        message: '采购订单信息不存在'
      })
      setTimeout(() => {
        this.cancelFunc();
      }, 300);
    }
    this.getPurchaseInfo();
  },
  methods: {
    // ------------------------采购单详情-----------------------------------
    getPurchaseInfo() {
      if (!this.$route.query.id) return;
      purchaseApi.getPurchaseInfo({
        purchase_id: this.$route.query.id
      }).then(res => {
        console.log(res, '采购单详情')
        if (res.code == 200) {
          this.addForm = {
            purchase_id: res.data.Id,
            consignee: res.data.consignee || '',
            contact: res.data.contact || '',
            address: res.data.address || '',
            odd_numbers: res.data.odd_numbers || '',
            delivery_time: res.data.delivery_time || '',
            actual_arrival_time: res.data.actual_arrival_time || '',
          }
          this.$nextTick(() => {
            this.$refs['addFormRules'].clearValidate();
          })
        }
      })
    },
    // 提交
    saveSubmit(formName) {
      let addForm = this.addForm;
      console.log(addForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updatePurchaseLogistics({
            purchase_id: addForm.purchase_id,
            consignee: addForm.consignee,
            contact: addForm.contact,
            address: addForm.address,
            odd_numbers: addForm.odd_numbers,
            delivery_time: addForm.delivery_time,
            actual_arrival_time: addForm.actual_arrival_time,
          })
        } else {
          return false;
        }
      });
    },
    // 提交物流信息请求
    updatePurchaseLogistics(obj) {
      this.submitBtn = true;
      purchaseApi.updatePurchaseLogistics(obj).then(res => {
        console.log(res, "提交物流信息请求")
        this.submitBtn = false;
        if (res.code == 200) {
          this.cancelFunc();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>